<template>
<div class="dy-main EAccountId">
  <div class="dy-header">
    <x-header :right-options="{showMore: false}"  :left-options="{backText: '',preventGoBack: true}" @on-click-more="showMenus = true" @on-click-back="back">身份认证</x-header>
  </div>
  <div class="dy-body">
    <div class="IdPhoto" @click="downPop = true">
            <div class="line">
              <div class="bg">
                <img src="../../assets/img/EAccount/photo.png" alt="">
              </div>
            </div>
            <p>身份证正面照</p>
        </div>
        <div class="IdPhoto" @click="downPop = true">
            <div class="line">
              <div class="bg">
                <img src="../../assets/img/EAccount/photo.png" alt="">
              </div>
            </div>
            <p>身份证背面照</p>
        </div>

        <popup v-model="downPop" position="bottom" max-height="50%">
            <ul>
              <li @click="toScan">拍摄</li>
              <li>从手机相册选择</li>
              <li @click="downPop = false">取消</li>
            </ul>
        </popup>
  </div>
</div>
</template>

<script>
export default{
  data () {
    return {
      secondAccount: '开通Ⅱ类账户',
      thridAccount: '开通Ⅲ类账户',
      AccountSearch: 'Ⅱ/Ⅲ类账户查询',
      downPop: false // 控制底部弹层
    }
  },
  methods: {
    toScan: function () {
      this.$router.push({name: 'EAccountScan'})
    },
    back () {
      this.$publicFun.goBack(this)
    }
  }
}
</script>

<style lang="less">
  .EAccountId{
    .IdPhoto{
      width: 5.8rem;
      height: 3.4rem;
      margin: .28rem auto;
      padding: 0.29rem 0.55rem;
      background: white;
      p{
        text-align: center;
        padding-top: .26rem;
        font-size: .26rem;
      }
      .line{
        height: 2.3rem;
        border: 1px solid #ccc;
        padding: .21rem;
      }
      .bg{
        background: #fafafa;
        height: 1.87rem;
        text-align: center;
        padding-top: .44rem;
        &>img{
          display: inline-block;
          width: 1.1rem;
          height: 0.99rem;
        }
      }
    }
    ul{
      overflow: hidden;
      background: #fff;
      li{
        line-height: 0.99rem;
        border-bottom: 1px solid #eaeaea;
        font-size: .26rem;
        color: #333;
        text-align: center;
      }
    }
  }
</style>
